let { layer, $, form, laydate } = layui;
export default class Edit {
    constructor(tableIns, obj) {
        this.render();
        this.handle(tableIns, obj);
    }
    render() {
        let template = `
            <form class="layui-form" lay-filter="addFac" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">电影</label>
                    <div class="layui-input-block">
                        <select id="filmsInfo" name="films" lay-filter="films" lay-verify="required">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">影院</label>
                    <div class="layui-input-block">
                        <select id="cinemasInfo" name="cinemas" lay-filter="cinemas" lay-verify="required">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="dateBox">
                    
                </div>
                <div id="scheduleBox"></div>
            </form>
        `;
        $('#editFacTemplate').html(template);
    }
    handle(tableIns, obj) {
        let index = 0, index2 = 0;
        console.log(obj.data);
        layer.open({
            type: 1,
            title: '修改',
            content: $('#editFacTemplate').html(),
            area: ['300px', '500px'],
            btn: '添加',
            success(layero, ind) {
                form.render();
                $.ajax({
                    type: 'get',
                    url: '/films/all',
                    success(res) {
                        for (let i = 0; i < res.data.length; i++) {
                            $('#filmsInfo').append(`<option value="${res.data[i]._id}">${res.data[i].name}</option>`);
                        }
                        form.render('select');
                        $(`#filmsInfo`).val(obj.data.films._id);
                        form.render();
                    }
                });
                $.ajax({
                    type: 'get',
                    url: '/cinemas/all',
                    success(res) {
                        for (let i = 0; i < res.data.length; i++) {
                            $('#cinemasInfo').append(`<option value="${res.data[i]._id}">${res.data[i].name}</option>`);
                        }
                        form.render('select');
                        $(`#cinemasInfo`).val(obj.data.cinemas._id);
                        form.render();

                        $('#dateBox').html(`
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" id="addSchedule">新增日期</button>
                            </div>
                        `)
                        form.render();

                        for (let i = 0; i < obj.data.schedule.length; i++) {
                            let sid = 0;
                            let str = `
                                <div class="layui-form-item" style="width:200px;margin:auto;">
                                    <input type="text" name="date" class="layui-input" placeholder="选择日期" id="date${index}">
                                    <button type="button" id="addScreens${index}" class="layui-btn layui-btn-radius layui-btn-normal" style="margin-left:50px;">放映厅</button>
                                    <div id="screens${index}" data-id="${index}"></div>
                                </div>
                            `;
                            $('#scheduleBox').append(str);
                            form.render();
                            let screensid = $(`#screens${index}`).attr('data-id');
                            index++;
                            for (let j = 0; j < index; j++) {
                                laydate.render({
                                    elem: `#date${j}` //指定元素
                                });
                                $(`#date${j}`).val(obj.data.schedule[i].date);
                            }
                            $(`#addScreens${screensid}`).click(function () {
                                $.ajax({
                                    type: 'get',
                                    url: '/cinemas/' + obj.data.cinemas._id,
                                    success(res) {
                                        let screens = res.data.screens;
                                        let str2 = `
                                            <form class="layui-form" style="padding:10px;border: 1px solid #000;" lay-filter="screenData${screensid}_${sid}">
                                                <div>
                                                    <label class="layui-form-label">放映厅</label>
                                                    <select name="name" id="screensName${screensid}_${sid}"></select>
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">开始时间</label>
                                                    <input type="text" name="time" id="time${screensid}_${sid}" required lay-verify="required" placeholder="开始时间" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">结束时间</label>
                                                    <input type="text" name="end" id="end${screensid}_${sid}" required lay-verify="required" placeholder="结束时间" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">语言</label>
                                                    <input type="text" name="language" id="language${screensid}_${sid}" required lay-verify="required" placeholder="语言" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">票价</label>
                                                    <input type="text" name="price" id="price${screensid}_${sid}" required lay-verify="required" placeholder="票价" class="layui-input">
                                                </div>
                                            <form>
                                        `;
                                        $(`#screens${screensid}`).append(str2);
                                        form.render();
                                        console.log(screens);
                                        for (let j = 0; j < screens.length; j++) {
                                            $(`#screensName${screensid}_${sid}`).append(`<option value="${screens[j].name}">${screens[j].name}</option>`)
                                            form.render('select');
                                        }
                                        sid++;
                                        index2++;
                                    }
                                })
                            })
                            for (let j = 0; j < obj.data.schedule[i].screens.length; j++) {
                                let screensData = obj.data.schedule[i].screens;
                                $.ajax({
                                    type: 'get',
                                    url: '/cinemas/' + obj.data.cinemas._id,
                                    async: false,
                                    success(res) {
                                        let screens = res.data.screens;
                                        let str2 = `
                                            <form class="layui-form" style="padding:10px;border: 1px solid #000;" lay-filter="screenData${screensid}_${sid}">
                                                <div>
                                                    <label class="layui-form-label">放映厅</label>
                                                    <select name="name" id="screensName${screensid}_${sid}"></select>
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">开始时间</label>
                                                    <input type="text" name="time" id="time${screensid}_${sid}" required lay-verify="required" placeholder="开始时间" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">结束时间</label>
                                                    <input type="text" name="end" id="end${screensid}_${sid}" required lay-verify="required" placeholder="结束时间" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">语言</label>
                                                    <input type="text" name="language" id="language${screensid}_${sid}" required lay-verify="required" placeholder="语言" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">票价</label>
                                                    <input type="text" name="price" id="price${screensid}_${sid}" required lay-verify="required" placeholder="票价" class="layui-input">
                                                </div>
                                            <div>
                                        `;
                                        $(`#screens${screensid}`).append(str2);
                                        form.render();
                                        for (let item of screens) {
                                            $(`#screensName${screensid}_${sid}`).append(`<option value="${item.name}">${item.name}</option>`)
                                            form.render('select');
                                        }
                                        $(`#screensName${screensid}_${sid}`).val(screensData[j].name);
                                        $(`#time${screensid}_${sid}`).val(screensData[j].time);
                                        $(`#end${screensid}_${sid}`).val(screensData[j].end);
                                        $(`#language${screensid}_${sid}`).val(screensData[j].language);
                                        $(`#price${screensid}_${sid}`).val(screensData[j].price);
                                        sid++;
                                        index2++;
                                    }
                                })
                            }
                        }


                        $('#addSchedule').click(function () {
                            let sid = 0;
                            console.log(index);
                            let str = `
                                <div class="layui-form-item" style="width:200px;margin:auto;">
                                <input type="text" name="date" class="layui-input" placeholder="选择日期" id="date${index}">
                                <button type="button" id="addScreens${index}" class="layui-btn layui-btn-radius layui-btn-normal" style="margin-left:50px;">放映厅</button>
                                <div id="screens${index}" data-id="${index}"></div>
                                </div>
                                `;
                            $('#scheduleBox').append(str);
                            form.render();
                            let screensid = $(`#screens${index}`).attr('data-id');
                            index++;
                            for (let i = 0; i < index; i++) {
                                laydate.render({
                                    elem: `#date${i}` //指定元素
                                });
                            }
                            $(`#addScreens${screensid}`).click(function () {
                                $.ajax({
                                    type: 'get',
                                    url: '/cinemas/' + obj.data.cinemas._id,
                                    success(res) {
                                        let screens = res.data.screens;
                                        let str2 = `
                                            <form class="layui-form" style="padding:10px;border: 1px solid #000;" lay-filter="screenData${screensid}_${sid}">
                                                <div>
                                                    <label class="layui-form-label">放映厅</label>
                                                    <select name="name" id="screensName${screensid}_${sid}"></select>
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">开始时间</label>
                                                    <input type="text" name="time" id="time${screensid}_${sid}" required lay-verify="required" placeholder="开始时间" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">结束时间</label>
                                                    <input type="text" name="end" id="end${screensid}_${sid}" required lay-verify="required" placeholder="结束时间" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">语言</label>
                                                    <input type="text" name="language" id="language${screensid}_${sid}" required lay-verify="required" placeholder="语言" class="layui-input">
                                                </div>
                                                <div>
                                                    <label class="layui-form-label">票价</label>
                                                    <input type="text" name="price" id="price${screensid}_${sid}" required lay-verify="required" placeholder="票价" class="layui-input">
                                                </div>
                                            <form>
                                        `;
                                        $(`#screens${screensid}`).append(str2);
                                        form.render();
                                        console.log(screens);
                                        for (let item of screens) {
                                            $(`#screensName${screensid}_${sid}`).append(`<option value="${item.name}">${item.name}</option>`);
                                            form.render('select');
                                        }
                                        sid++;
                                        index2++;
                                    }
                                })
                            })
                            // index++;
                        })
                    }
                })
            },
            yes(ind) {
                let { films, cinemas } = form.val('addFac');
                let schedule = [];
                for (let i = 0; i < index; i++) {
                    let screen = [];
                    let sid = 0;
                    for (let j = 0; j < index2; j++) {
                        let formData = form.val(`screenData${i}_${sid}`)
                        if (formData.name) {
                            screen.push(formData);
                        }
                        sid++;
                    }
                    schedule.push({
                        date: $(`#date${i}`).val(),
                        screens: screen
                    })
                }
                $.ajax({
                    type: 'put',
                    url: '/fac/' + obj.data._id,
                    data: {
                        films,
                        cinemas,
                        schedule: JSON.stringify(schedule)
                    },
                    success(res) {
                        tableIns.reload();
                        console.log(res);
                    }
                })
                layer.close(ind);
            }
        })
    }
}